<template>
    <a-modal
        :title="!currRow ? '新建自评表' : '编辑自评表'"
        :visible="isShowModal"
        width="40%"
        :footer="null"
        dialogClass="custom-modal"
        :maskClosable="false"
        @cancel="handleCancel"
    >
        <a-spin :spinning="false">
            <a-form-model
                :model="form"
                ref="form"
                :labelCol="{ span: 6 }"
                :wrapperCol="{ span: 18 }"
                :rules="rules"
                :colon="false"
                class="m-form-model"
            >
                <a-row :gutter="10">
                    <a-col :span="24" class="mb16">
                        <a-form-model-item label="城市名称" prop="userName">
                            <a-input
                                autoComplete="off"
                                placeholder="请输入城市名称"
                                v-model.trim="form.cityName"
                                allowClear
                                :disabled="!!currRow"
                            />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24" class="mb16">
                        <a-form-model-item label="创建年度">
                            <el-date-picker v-model="form.time" type="year" placeholder="选择年"></el-date-picker>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-button type="primary" class="fr" @click="handleOk" :loading="confirmLoading">确定</a-button>
                        <a-button class="fr mr20" @click="handleCancel">取消</a-button>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-spin>
    </a-modal>
</template>
<script>
import { FormModel, TreeSelect } from 'ant-design-vue'
import { usersApi } from '../../../../common/api/setting'
import { validatorTel } from '../../../../utils/validation'
import { getTreeData } from '@/utils/methods'
const rules = {
    cityName: [{ required: true, message: '请选择城市名称', trigger: 'blur' }],
    time: [{ required: true, message: '请选择角色', trigger: 'blur' }],
}
export default {
    data() {
        return {
            confirmLoading: false,
            form: {
                citName: null,
                time: null,
            },
            rules: {
                ...rules,
            },
        }
    },

    props: {
        isShowModal: {
            required: true,
            type: Boolean,
        },
        currRow: {
            required: false,
            type: [Object, undefined],
        },
        roleList: {
            required: false,
            type: Array,
        },
    },
    watch: {
        isShowModal: {
            immediate: true,
            handler: function (isShowModal) {
                if (isShowModal) {
                    this.beforeShowModal()
                } else {
                    this.$refs.form && this.$refs.form.resetFields()
                }
            },
        },
    },
    beforeDestroy() {
        this.$refs.form && this.$refs.form.resetFields()
    },
    methods: {
        beforeShowModal() {
            if (this.currRow) {
                // 编辑
                const { password, roleId, userName, realName, mobile, jobId, jobName, jobs, userType } = this.currRow
                const jobIds = []
                jobs.forEach(job => {
                    jobIds.push({
                        value: job.jobId,
                    })
                })
                Object.assign(this.form, {
                    password,
                    roleId: roleId || undefined,
                    userName,
                    realName,
                    mobile,
                    surePassword: password,
                    jobId: jobIds,
                    jobName,
                    userType,
                })
            }
        },
        async save() {
            const { password, roleId, userName, realName, mobile, jobName, deptId, userType } = this.form
            const apiType = this.currRow ? 'edit' : 'add'
            this.confirmLoading = true
            let res
            let jobIds = []
            this.form.jobId.forEach(job => {
                jobIds.push(job.value)
            })
            try {
                res = await usersApi[apiType]({
                    password,
                    roleId,
                    userName,
                    realName,
                    mobile,
                    jobName,
                    deptId,
                    jobId: jobIds.join(','),
                    id: this.currRow && this.currRow.id,
                    enterpriseId: this.treeSelectedAreaId,
                    userType,
                })
                if (res.code == 200) {
                    this.$message.success('操作成功')
                    this.$emit('update:isShowModal', false)
                    this.$emit('updateData')
                } else {
                    this.$message.error(res.message)
                }
            } catch (e) {
                console.log(e)
            }
            this.confirmLoading = false
        },
        async handleOk() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.save()
                } else {
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('update:isShowModal', false)
        },
    },
}
</script>
<style scoped lang="scss">
/deep/ .modal-tree-select .ant-select {
    min-height: 32px !important;
    height: unset !important;
}
.supervise-search-icon {
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 3px;
}
.search-icon:hover {
    color: #1890ff;
}
.supervise-search-icon:hover {
    color: #1890ff;
}
/deep/ .ant-select-open .ant-select-arrow-icon svg {
    transform: rotate(0deg);
    transition: transform 0s;
}
/deep/ .ant-input {
    padding-right: 40px;
}
/deep/ .ant-select-selection__rendered {
    margin-right: 40px;
}
/deep/ .ant-cascader-picker-label {
    padding-right: 40px;
}
/deep/ .ant-select-selection__clear,
/deep/.ant-cascader-picker-clear {
    right: 28px;
}
</style>
